<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit" />
		<meta name="force-rendering" content="webkit" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
		<title>browse</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/responsive.css" />
	</head>
	<body>
		<div class="main">
			<div class="browse-box">
				<div class="hd g-header">
					<div class="left">
						<div class="logo">
							<a href="javascript:void(0);"><img src="images/logo.png" alt=""></a>
						</div>
					</div>
					<div class="right">
						<div class="component">
							<div class="tabs">
								<a class="active" href="javascript:void(0);">Parameters</a>
								<a href="javascript:void(0);">Report</a>
								<a href="javascript:void(0);">User</a>
							</div>
							<div class="user">
								<ul>
									<li>
										<a href="javascript:void(0);"><img src="images/icon_03.png"></a>
									</li>
									<li>
										<a class="user-button" href="javascript:void(0);"><img src="images/icon_04.png"><span>Admin</span></a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="bd">
					<div class="sidebar">
						<div class="title">
							Filters
						</div>
						<div class="serach-item">
							<label>Client</label>
							<div class="input-box">
								<div id="select-client" class="xm-select-item"></div>
							</div>
						</div>
						<div class="serach-item">
							<label>Product Category</label>
							<div class="input-box">
								<div id="select-category" class="xm-select-item"></div>
							</div>
						</div>
						<div class="filter-item">
							<ul>
								<li>
									<a href="javascript:void(0);"><i class="icon"></i>Photo Style</a>
									<div class="childer">
										<dl>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>360 Degree</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>45 Degree Angle</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Invisible Mannequin</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Knolling</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Straight on</span>
												</label>
											</dd>
										</dl>
									</div>
								</li>
								<li>
									<a href="javascript:void(0);"><i class="icon"></i>Scene Style</a>
									<div class="childer">
										<dl>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>360 Degree</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>45 Degree Angle</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Invisible Mannequin</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Knolling</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Straight on</span>
												</label>
											</dd>
										</dl>
									</div>
								</li>
								<li>
									<a href="javascript:void(0);"><i class="icon"></i>Lighting Style</a>
									<div class="childer">
										<dl>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>360 Degree</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>45 Degree Angle</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Invisible Mannequin</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Knolling</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Straight on</span>
												</label>
											</dd>
										</dl>
									</div>
								</li>
								<li>
									<a href="javascript:void(0);"><i class="icon"></i>Lighting Style</a>
									<div class="childer">
										<dl>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>360 Degree</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>45 Degree Angle</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Invisible Mannequin</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Knolling</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Straight on</span>
												</label>
											</dd>
										</dl>
									</div>
								</li>
								<li>
									<a href="javascript:void(0);"><i class="icon"></i>Background Style</a>
									<div class="childer">
										<dl>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>360 Degree</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>45 Degree Angle</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Invisible Mannequin</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Knolling</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Straight on</span>
												</label>
											</dd>
										</dl>
									</div>
								</li>
								<li>
									<a href="javascript:void(0);"><i class="icon"></i>Props</a>
									<div class="childer">
										<dl>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>360 Degree</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>45 Degree Angle</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Invisible Mannequin</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Knolling</span>
												</label>
											</dd>
											<dd>
												<label class="g-checkbox">
													<input type="checkbox" name="" id="" value="" />
													<i></i>
													<span>Straight on</span>
												</label>
											</dd>
										</dl>
									</div>
								</li>
							</ul>
						</div>
						<div class="serach-item">
							<label>Creator</label>
							<div class="input-box">
								<input type="text" name="" id="" value="" placeholder="Search creator name" />
								<i class="icon"></i>
							</div>
						</div>
						<div class="time-item">
							<label>Create Date</label>
							<div id="preview-sticky" class="input-box">
								<input id="litepicker" autocomplete="off" placeholder="Jan dd - Jan mm,yyyy" />
								<i></i>
							</div>
						</div>
					</div>
					<div class="content">
						<div class="serch">
							<div class="form">
								<form class="form-wrap" action="">
									<div class="input-box">
										<button class="submit-button" type="button"></button>
										<input type="text" name="" id="" value="" placeholder="Enter a keyword" />
									</div>
									<div class="buttons">
										<button class="active" type="button">View</button>
										<button type="button">Active</button>
										<button type="button">Deleted</button>
									</div>
								</form>
							</div>
							<button class="create-button">Create</button>
						</div>
						<div class="product-list">
							<ul>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>

								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>

								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>
								<li>
									<div class="tit">
										<span>Godiva parameter</span>
										<div class="buttons">
											<button class="btn1" type="button"></button>
											<div class="more">
												<button class="btn2 result " type="button"></button>
												<div class="select">
													<a href="javascript:void(0);">Edit</a>
													<a href="javascript:void(0);">Duplicate</a>
													<a href="javascript:void(0);">Delete</a>
												</div>
											</div>
										</div>
									</div>
									<div class="big-img">
										<a href="javascript:void(0);"><img src="images/big_01.png"></a>
									</div>
									<div class="bottom">
										<div class="small-img">
											<a href="javascript:void(0);"><img src="images/smll_01.png" alt=""></a>
											<a href="javascript:void(0);"><img src="images/smll_02.png" alt=""></a>
										</div>
										<div class="number">
											+3
										</div>
									</div>
								</li>

							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 遮罩层 -->
		<div class="shade"></div>
		
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		 <script src="https://cdn.jsdelivr.net/npm/litepicker/dist/js/main.js"></script>
		<script src="js/xm-select.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bscroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			$(function() {
				// 页面滑动
				let scroll = new BScroll('.product-list', {
					scrollY: true,
					freeScroll: true,
					mouseWheel: true,
					probeType: 2, 
					click: true
				})
				// 选中日期
				var picker = new Litepicker({
					element:document.getElementById('litepicker'),
					format:'D MMM, YYYY',
					lang:'en-US',
					numberOfMonths:1,
					numberOfColumns:1,
					showTooltip:true,
					zIndex: 9999,
					minDate: null,
					maxDate: null,
					minDays: null,
					maxDays: null,
					selectForward: !1,
					selectBackward: !1,
					splitView: !1,
					inlineMode: !1,
					singleMode: !1,
					autoApply: !0,
					allowRepick: !1,
					// showWeekNumbers: !1,
					showTooltip: !0,
					hotelMode: !1,
					disableWeekends: !1,
					scrollToDate: !0,
					mobileFriendly: !0,
					lockDaysFormat: "YYYY-MM-DD",
					lockDays: [],
					bookedDaysFormat: "YYYY-MM-DD",
					bookedDays: [],
					dropdowns: {
						minYear: 1990,
						maxYear: null,
						months: !1,
						years: !1
					},
					tooltipText: {
						one: "day",
						other: "days"
					},
					onShow: function() {
						console.log("onShow callback")
						$(".browse-box .bd .sidebar .filter-item li .childer").slideUp(300)
					},
					onHide: function() {
						console.log("onHide callback")
					},
					onSelect: function(e, t) {
						console.log("onSelect callback", e, t)
					},
					onError: function(e) {
						console.log("onError callback", e)
					},
					onChangeMonth: function(e, t) {
						console.log("onChangeMonth callback", e, t)
					},
					onChangeYear: function(e) {
						console.log("onChangeYear callback", e)
					}
				});
				
				
				

				// 手风琴
				$(".browse-box .sidebar .filter-item li > a").on("click", function() {
					$(this).toggleClass('open');
					$(this).parent().siblings().find('a').removeClass('open');
					$(this).parent().children('.childer').slideToggle().parent().siblings().children('.childer').slideUp();
				})


				// tabs
				$(".browse-box .content .hd .component .tabs a").on("click", function() {
					$(this).addClass("active").siblings().removeClass('active');
				})

				// 产品列表
				$(".browse-box .bd li").each(function() {
					var _this = $(this)
					var button = _this.find(".result");
					var select = _this.find(".select");
					button.on("click", function() {
						if ($(this).hasClass("open")) {
							$(this).removeClass("open")
							select.slideUp(300)
						} else {
							$(".browse-box .bd li .result").find('').removeClass('open');
							$(".browse-box .bd li .select").slideUp(300)
							$(this).addClass("open")
							select.slideDown(300)
						}
					})
				});

				$(document).on("click", function(e) {
					var target = $(e.target);
					if (target.closest(".browse-box .result").length == 0) {
						$(".browse-box .result").removeClass("open");
						$(".browse-box .bd li .select").slideUp(300)
					}
				});
			 
				// 多选框
				var mySelect = xmSelect.render({
					el: '#select-client',
					language: 'en',
					filterable: true,
					tips: 'Search client name',
					data: [
						{name: 'Godiva', value: 1},
						{name: 'Abc Chocolate', value: 2},
						{name: 'Godiva', value: 3},
						{name: 'Godiva', value: 4},
					]
				});
				var mySelect2 = xmSelect.render({
					el: '#select-category', 
					language: 'en',
					tips: 'Search product category',
					filterable: true,
					data: [
						{name: 'Godiva', value: 1},
						{name: 'Abc Chocolate', value: 2},
						{name: 'Godiva', value: 3},
						{name: 'Godiva', value: 4},
					]
				})
			})
		</script>
	</body>

</html>
